<!-- 角色权限的配置 -->
<template>
    <el-row>
        <el-col :span="3">
            <el-text>角色名称</el-text>         
        </el-col>
        <el-col :span="3">
            <el-text>
                {{ role.roleName }}
            </el-text>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="3">
            <el-text>权限配置</el-text>
        </el-col>
        <el-col :span="3">
            <el-tree
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
    show-checkbox
    ref="treeRef"
    :default-expand-all="true"
    :check-on-click-node="false"
  />
        </el-col>
    </el-row>
    <el-row>
        <el-button @click="getCheckedNodes">get by node</el-button>
    </el-row>
</template>

<script setup lang="ts">
import axios from 'axios'
  import { reactive, ref,onMounted } from 'vue'
  import { useGoodStore } from '@/stores/counter';
  import { ElTree } from 'element-plus'
  const useStore=useGoodStore();

  interface Tree {
    value: number
  label: string
  children?: Tree[]
}
const data=ref<Tree[]>([])

 const handleNodeClick = (data: Tree) => {
  console.log(data)
}
const defaultProps = {
  children: 'children',
  label: 'permissionName',
  value:'permissionId'
}
const treeRef = ref<InstanceType<typeof ElTree>>()

const getCheckedNodes = () => {
  console.log(treeRef.value!.getCheckedNodes(false, false))
}

const role=ref({
    roleId: 0,
    roleName: "",
    roleState: true,
    isDel: false
})

onMounted(()=>{
    loadRole();
    loadTree();
})
const loadRole=()=>{
    axios.get('/api/User/RoleBack',{
        params:{
            rid:useStore.rid
        }
    })
    .then(res=>{
        role.value=res.data.data;
    })
}
const loadTree=()=>{
    axios.get('/api/User/GetTreePermission')
    .then(res=>{
        data.value=res.data.data;
    })
}


</script>